<template>
	<view>
		<view class="share-box">

			<view class="swiper-box">
				<view v-for="(item,index) in posters" :key="index">
					<canvas style="width: 375px; height: 667px;" class="position-hidden" :canvas-id="'canvas_' + index"
						:id="'canvas_' + index"></canvas>
					<canvas style="width:  120px; height: 120px;" :canvas-id="'qrcode_' + index" :id="'qrcode_' + index"
						class="position-hidden"></canvas>
				</view>

				<swiper :indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration"
					@change="changeSwiper" class="swiperHight">
					<swiper-item v-for="(item,index) in qrimgList" :key="index">
						<view class="swiper-item">
							<!-- #ifdef H5 -->
							<img :src="item" mode="widthFix" class="swiper-item"></img>
							<!-- #endif -->
							<!-- #ifndef H5 -->
							<image :src="item" mode="widthFix" class="swiper-item"></image>
							<!-- #endif -->
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- #ifdef APP -->
			<button @click="shareToggle" class="shareBtn">分享</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button class="shareBtn">长按图片进行保存或转发</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button @click="save" class="shareBtn">保存到手机</button>
			<!-- #endif -->
			<view>
				<!-- 分享示例 -->
				<uni-popup ref="share" type="bottom" safeArea backgroundColor="#fff">
					<uni-popup-share @select="change"></uni-popup-share>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js';
	import UQRCode from '../../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				imgList: [],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				qrimgList: [],
				current: 0,
				posters: [],
				postersTmp: [],
				qrcodesTmp: [],
				user: {},
				count: 0,
			};
		},
		onLoad(options) {
			console.log(options)
			if (options.title) {
				console.log(options.title)
				uni.setNavigationBarTitle({
					title: options.title
				})
			}
		},
		onReady() {
			uni.showLoading({
				title: "二维码生成中"
			})
			this.$api.post({
				url: '/wanlshop/user/refresh',
				success: res => {
					console.log(res, '---->')
					this.user = res.userinfo
					this.$store.commit('statistics/edit', res.statistics);
					this.$store.commit('user/setUserInfo', res.userinfo);
					this.getqrImg()
				}
			});

		},
		computed: {},
		methods: {
			save() {
				this.imgList.forEach(res => {
					uni.downloadFile({
						url: this.$wanlshop.oss(res), //仅为示例，并非真实的资源
						success: (res1) => {
							uni.saveImageToPhotosAlbum({
								filePath: res1.tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									})

								}
							});
							
						}
					});
				})

			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			getqrImg() {
				let _this = this
				this.$api.get({
					url: '/wanlshop/common/qrcode',
					success: (res) => {
						// this.qrimgList = res
						this.posters = res;
						res.map((item, index) => {
							// #ifdef MP-WEIXIN
							uni.getImageInfo({
								src: 'https://img.aibbyp.com/uploads/0bfdfe83baae267e86d786e4014d0618e5e5edd9.png?x-oss-process=image/auto-orient,1/interlace,1/format,jpg/quality,q_90/sharpen,50/resize,m_fill,w_360,h_360',
								success: function(image) {
									console.log(image, 'getImageInfo');
									_this.genQrCode(item, index, image.path)
								},
								fail: function(err) {
									console.log(err);
								}
							});
							// #endif
							// #ifndef MP-WEIXIN
							this.genQrCode(item, index)
							// #endif
							this.imgList.push(item.background_url)
						})
					},
					fail: res => {}
				})
			},

			genQrCode(item, index, image) {
				console.log('执行genQrCode，请求已发送成功', item);
				// 生成二维码
				let canvas_id = 'qrcode_' + index;
				let itemTmp = Object.assign({}, item)
				let url = itemTmp.target_url_h5
				let target_url = url + this.user.uuid
				// var qr = new UQRCode();
				// // 设置二维码内容
				// qr.data = target_url;
				// // 设置二维码大小，必须与canvas设置的宽高一致
				// qr.size = 120;
				// // 调用制作二维码方法
				// qr.make();
				// // 获取canvas上下文
				// var canvasContext = uni.createCanvasContext(canvas_id, this); // 如果是组件，this必须传入
				// // 设置uQRCode实例的canvas上下文
				// qr.canvasContext = canvasContext;
				// // 调用绘制方法将二维码图案绘制到canvas上
				// qr.drawCanvas();



				uQRCode.make({
					canvasId: canvas_id,
					text: target_url,
					size: 120,
					success: res => {
						console.log(res, 'success')
						let qrCodeSrc = res;
						let that = this;
						setTimeout(() => {

							uni.canvasToTempFilePath({
								canvasId: canvas_id,
								success: function(res) {
									let itemTmp = {
										// #ifndef MP-WEIXIN
										background_url: item.background_url,
										// #endif
										// #ifdef MP-WEIXIN
										background_url: image,
										// #endif
										qrcode_src: res.tempFilePath,
										qrcode_x: item.qrcode_x,
										qrcode_y: item.qrcode_y,
										width: 120,
										margin: 8,
										canvas_id: "canvas_" + index,
										index: index,
									}
									that.genPosters(itemTmp)
									// that.qrcodesTmp[index] = res.tempFilePath
									// console.log(that.qrcodesTmp.length)
									// if (that.qrcodesTmp.length == that.posters.length) {
									//     that.qrimgList = that.qrcodesTmp;
									//     uni.hideLoading()
									// }
								}
							})
						}, 400)

						// 默认生成第一张海报
					}
				});
			},
			genPosters(item) {
				let {
					canvas_width,
					canvas_height,
					background_url,
					qrcode_src,
					canvas_id,
					index,
					margin,
					width,
					qrcode_x,
					qrcode_y,
				} = item;
				// #ifdef MP-WEIXIN
				let background_src = background_url;
				// #endif
				// #ifndef MP-WEIXIN
				let background_src = this.$wanlshop.oss(background_url);
				// #endif
				canvas_width = 375;
				canvas_height = 667;
				margin = 8;

				var ctx = uni.createCanvasContext(canvas_id, this)
				ctx.clearRect(0, 0, canvas_width, canvas_height);
				ctx.rect(0, 0, canvas_width, canvas_height);
				// // 获取背景图片信息
				let backgroundImageInfo = {
					width: canvas_width,
					height: canvas_height
				};
				// // 设置背景图片宽高
				let backgroundWidth = canvas_width;
				let backgroundHeight = (backgroundImageInfo.height * canvas_width) / backgroundImageInfo.width;
				ctx.drawImage(background_src, 0, 0, backgroundWidth, backgroundHeight);

				let qrWidth = width;
				let qrHeight = width;
				let qrX = qrcode_x;
				let qrY = qrcode_y;

				if (qrX != 0) {
					ctx.fillStyle = "#ffffff";
					ctx.fillRect(qrX, qrY, qrWidth, qrHeight);
					ctx.drawImage(qrcode_src, qrX + margin, qrY + margin, qrWidth - margin * 2, qrHeight - margin *
						2);
				}
				// let logoWidth = 50;
				// let logoHeight = 50;
				// let logoX = qrcode_x;
				// let logoY = qrcode_y;
				// ctx.fillStyle = "#ffffff";
				// ctx.fillRect(logoX, logoY, logoWidth, logoHeight);
				// ctx.drawImage(qrcode_src, logoX + margin, logoY + margin, logoWidth - margin * 2, logoHeight - margin *
				//     2);

				ctx.draw()

				const that = this;
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: canvas_id,
						success: function(res) {
							that.qrcodesTmp[index] = res.tempFilePath
							that.count = that.count + 1;
							if (that.count == that.posters.length) {
								that.qrimgList = that.qrcodesTmp;
								uni.hideLoading()
							}
						}
					})
				}, 600)
			},
			change(e) {
				if (e.index == 0) {
					this.share()
				}
			},
			shareToggle() {
				this.$refs.share.open()
			},
			share() {
				// #ifdef APP-PLUS
				if (this.qrimgList[this.current].type == 0) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						imageUrl: this.qrimgList[this.current],
						title: "好饰商家版",
						summary: "装修设计建材一站式全屋定制平台",
						imageUrl: this.qrimgList[this.current].img,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
							uni.$u.toast('分享成功')
						},
						fail: function(err) {
							uni.$u.toast('分享失败')
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					console.log(this.qrimgList)
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: this.qrimgList[this.current],
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
				// #endif
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
		}
	};
</script>

<style>
	.swiperHight{
		/* #ifdef MP-WEIXIN */
		
		height: 90vh
		/* #endif */
	}
	.share-box {
		padding: 50rpx 0;
		width: 100%;
		height: 100%;
	}

	.share-icon {
		display: flex;
		justify-content: left;
		align-items: center;
		width: 750rpx;
		height: 150rpx;
	}

	.weixin {
		width: 25%;
		height: 100%;
		text-align: center;
		padding: 13rpx 0;
	}

	.swiper-box {
		height: 600px;
		padding: 0 40rpx;
	}

	.shareBtn {
		margin: 20px auto;
		color: #FFF;
		font-weight: 550;
		width: 670rpx;
		height: 63rpx;
		border-radius: 46px;
		opacity: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 6px 10px;
		gap: 10px;
		background: linear-gradient(104deg, #FFA64C 16%, #FD9328 51%, #FD8913 79%);
		box-shadow: 0px 4px 10px 0px rgba(254, 137, 19, 0.3);
		z-index: 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	uni-swiper {
		display: block;
		height: 100%;
	}

	.swiper-item {
		display: block;
		height: 100%;
		text-align: center;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.position-hidden {
		position: fixed;
		top: 0;
		right: -375px;
	}
</style>